<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>TypeScript | 个人博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="基础TS基本类型：Boolean Number String Array Function Object Symbol undefined null            Void any never 元祖 枚举 高级类型（交叉类型 联合类型 条件类型 索引类型 映射类型） –类型注解– 作用:相当于强类型语音中的类型声明语法：（变量&#x2F;函数）: type原始类型 123let bool:">
<meta property="og:type" content="article">
<meta property="og:title" content="TypeScript">
<meta property="og:url" content="https://gitee.com/wieldy/bailment-blog/2023/04/20/TypeScript/index.html">
<meta property="og:site_name" content="个人博客">
<meta property="og:description" content="基础TS基本类型：Boolean Number String Array Function Object Symbol undefined null            Void any never 元祖 枚举 高级类型（交叉类型 联合类型 条件类型 索引类型 映射类型） –类型注解– 作用:相当于强类型语音中的类型声明语法：（变量&#x2F;函数）: type原始类型 123let bool:">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2023-04-20T12:27:11.000Z">
<meta property="article:modified_time" content="2023-07-03T05:54:25.629Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/bailment-blog/atom.xml" title="个人博客" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/bailment-blog/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/bailment-blog/css/style.css">

  
    
<link rel="stylesheet" href="/bailment-blog/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 6.3.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/bailment-blog/" id="logo">个人博客</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/bailment-blog/">Home</a>
        
          <a class="main-nav-link" href="/bailment-blog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/bailment-blog/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://gitee.com/wieldy/bailment-blog"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-TypeScript" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/04/20/TypeScript/" class="article-date">
  <time class="dt-published" datetime="2023-04-20T12:27:11.000Z" itemprop="datePublished">2023-04-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="p-name article-title" itemprop="headline name">
      TypeScript
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h2><p>TS基本类型：Boolean Number String Array Function Object Symbol undefined null<br>            Void any never 元祖 枚举 高级类型（交叉类型 联合类型 条件类型 索引类型 映射类型）</p>
<p>–类型注解– 作用:相当于强类型语音中的类型声明<br>语法：（变量&#x2F;函数）: type<br>原始类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">bool</span>:<span class="built_in">boolean</span> = <span class="literal">true</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">num</span>:<span class="built_in">number</span> = <span class="number">123</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>:<span class="built_in">string</span> = <span class="string">&#x27;abc&#x27;</span></span><br></pre></td></tr></table></figure>
<p>数组：相同类型的集合</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 两种写法</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr1</span>:<span class="built_in">number</span>[] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr2</span>:<span class="title class_">Array</span>&lt;<span class="built_in">number</span>&gt; = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br></pre></td></tr></table></figure>
<p>联合类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">arr3</span>:<span class="title class_">Array</span>&lt;<span class="built_in">number</span> | <span class="built_in">string</span>&gt; = [<span class="number">1</span>, <span class="string">&#x27;2&#x27;</span>, <span class="number">3</span>]</span><br></pre></td></tr></table></figure>
<p>元祖：是一组特殊的数组类型，限制了数组的类型与个数。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">tuple</span>:[<span class="built_in">number</span>, <span class="built_in">string</span>] = [<span class="number">0</span>, <span class="string">&#x27;1&#x27;</span>]</span><br><span class="line"><span class="comment">// 越界：元组可以通过方法push添加元素，如tuple.push(3),如果访问tuple[2]会报错。（不能通过索引添加，可以push已有类型）</span></span><br></pre></td></tr></table></figure>
<p>函数</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> add = (<span class="attr">x</span>:<span class="built_in">number</span>,<span class="attr">y</span>:<span class="built_in">number</span>):<span class="function"><span class="params">number</span> =&gt;</span> x + y</span><br><span class="line"><span class="comment">// TS的类型推断可以省略:number</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">compute</span>:<span class="function">(<span class="params">x:<span class="built_in">number</span>, y:<span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span></span><br><span class="line">    compute = <span class="function">(<span class="params">a,b</span>) =&gt;</span> a + b</span><br></pre></td></tr></table></figure>
<p>对象</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">obj</span>:&#123;<span class="attr">x</span>:<span class="built_in">number</span>,<span class="attr">y</span>:<span class="built_in">number</span>&#125;=&#123;<span class="attr">x</span>:<span class="number">1</span>,<span class="attr">y</span>:<span class="number">2</span>&#125;</span><br><span class="line">obj.<span class="property">x</span>=<span class="number">3</span></span><br></pre></td></tr></table></figure>
<p>Symbol</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">S1</span>:<span class="built_in">symbol</span>=<span class="title class_">Symbol</span>()</span><br><span class="line"><span class="keyword">let</span> <span class="variable constant_">S2</span>=<span class="title class_">Symbol</span>()</span><br></pre></td></tr></table></figure>
<p>undefined,null</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">un</span>:<span class="literal">undefined</span> = <span class="literal">undefined</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">nu</span>:<span class="literal">null</span> = <span class="literal">null</span></span><br></pre></td></tr></table></figure>
<p>void 没有任何返回值的类型 接受null和undefined</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">noReturn</span> = (<span class="params"></span>) =&gt; &#123;&#125; </span><br></pre></td></tr></table></figure>
<p>any 任何类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> x; x = <span class="number">1</span>; x = []</span><br></pre></td></tr></table></figure>
<p>never 错误，死循环，类型判断时会出现never</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">error</span>=(<span class="params"></span>)=&gt;&#123; <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;error&#x27;</span>) &#125;</span><br><span class="line"><span class="keyword">let</span> <span class="title function_">endless</span> = (<span class="params"></span>) =&gt; &#123; <span class="keyword">while</span>(<span class="literal">true</span>)&#123;&#125; &#125;</span><br></pre></td></tr></table></figure>
<p>枚举类型：一组有名字的常量集合。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数字枚举：默认从0开始索引，Role.Reporter 枚举成员是只读的 内部通过可以反向映射（反举）</span></span><br><span class="line"><span class="keyword">enum</span> <span class="title class_">Role</span> &#123;</span><br><span class="line">    <span class="title class_">Reporter</span>=<span class="number">1</span>,</span><br><span class="line">    <span class="title class_">Developer</span>,</span><br><span class="line">    <span class="title class_">Maintainer</span>,</span><br><span class="line">    <span class="title class_">Owner</span>,</span><br><span class="line">    <span class="title class_">Guest</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 字符串枚举 （不会反向映射）</span></span><br><span class="line"><span class="keyword">enum</span> <span class="title class_">Message</span> &#123;</span><br><span class="line">    success=<span class="string">&quot;恭喜你，成功了&quot;</span>,</span><br><span class="line">    <span class="title class_">Fail</span>=<span class="string">&quot;抱歉，失败了&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 异构枚举 ？ 注：可以有不同类型值得集合</span></span><br><span class="line"><span class="keyword">enum</span> <span class="title class_">Answer</span> &#123;</span><br><span class="line">    N,</span><br><span class="line">    Y=<span class="string">&quot;Yes&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 枚举成员</span></span><br><span class="line"><span class="keyword">enum</span> <span class="title class_">Char</span> &#123;</span><br><span class="line">    <span class="comment">// const 编译时执行</span></span><br><span class="line">    a,</span><br><span class="line">    b=<span class="title class_">Char</span>.<span class="property">a</span>,</span><br><span class="line">    c=<span class="number">1</span>+<span class="number">3</span>,</span><br><span class="line">    <span class="comment">// computed 保留到运行时环境</span></span><br><span class="line">    d=<span class="title class_">Math</span>.<span class="title function_">random</span>(),</span><br><span class="line">    e=<span class="string">&quot;123&quot;</span>.<span class="property">length</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 常量枚举</span></span><br><span class="line"><span class="keyword">const</span> <span class="keyword">enum</span> <span class="title class_">Month</span> &#123;</span><br><span class="line">    <span class="title class_">Jan</span>,</span><br><span class="line">    <span class="title class_">Feb</span>,</span><br><span class="line">    <span class="title class_">Mar</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 编译时会被移除</span></span><br><span class="line"><span class="comment">// 场景：需要对象属性值的时候，减少编译后代码体积。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 枚举类型</span></span><br><span class="line"><span class="keyword">enum</span> E &#123; a, b &#125;</span><br><span class="line"><span class="keyword">enum</span> F &#123; a=<span class="number">0</span>,b=<span class="number">1</span> &#125;</span><br><span class="line"><span class="keyword">enum</span> G &#123; a=<span class="string">&quot;apple&quot;</span>, b = <span class="string">&quot;banana&quot;</span> &#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">e</span>:E = <span class="number">3</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">f</span>:F = <span class="number">3</span></span><br><span class="line"><span class="comment">// e===f ? 两个不同的枚举成员之间是不可以相互比对</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">e1</span>:E.<span class="property">a</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">e2</span>:E.<span class="property">b</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">e3</span>:E.<span class="property">a</span></span><br><span class="line"><span class="comment">// e1===e2 ? 不可以比较，e1与e3可以相互比较</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">g1</span>:G=G.<span class="property">b</span>    <span class="comment">//字符串只能是枚举成员类型</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">g2</span>:G=G.<span class="property">a</span></span><br></pre></td></tr></table></figure>

<h2 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h2><p>接口用来约束对象，函数，以及类的结构与类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">List</span> &#123;</span><br><span class="line">    <span class="keyword">readonly</span> <span class="attr">id</span>:<span class="built_in">number</span>;</span><br><span class="line">    age?:<span class="built_in">number</span>;<span class="comment">//可选属性</span></span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span>;</span><br><span class="line">    [<span class="attr">x</span>:<span class="built_in">string</span>]:<span class="built_in">any</span>; <span class="comment">//字符串索引签名</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Result</span> &#123;</span><br><span class="line">    <span class="attr">data</span>: <span class="title class_">List</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">render</span>(<span class="params">result:result</span>) &#123;</span><br><span class="line">    result.<span class="property">data</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">val</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(value)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 绕过类型检查①</span></span><br><span class="line"><span class="keyword">let</span> result = &#123;</span><br><span class="line">    <span class="attr">data</span>: [&#123; <span class="attr">id</span>:<span class="number">1</span>, <span class="attr">name</span>: <span class="string">&#x27;A&#x27;</span>, <span class="attr">sex</span>: <span class="string">&#x27;male&#x27;</span> &#125;, &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">&#x27;b&#x27;</span> &#125;]</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">render</span>(result)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 绕过类型检查②</span></span><br><span class="line"><span class="comment">// 类型断言：告知编译(TS) 我知道它是Result类型</span></span><br><span class="line"><span class="title function_">render</span>(&#123;<span class="attr">data</span>: [&#123; <span class="attr">id</span>:<span class="number">1</span>,<span class="attr">name</span>: <span class="string">&#x27;A&#x27;</span>, <span class="attr">sex</span>: <span class="string">&#x27;male&#x27;</span> &#125;, </span><br><span class="line">                &#123;<span class="attr">id</span>:<span class="number">2</span>, <span class="attr">name</span>: <span class="string">&#x27;13&#x27;</span>&#125;</span><br><span class="line">            ]&#125; <span class="keyword">as</span> <span class="title class_">Result</span> )</span><br><span class="line"></span><br><span class="line"><span class="comment">// 绕过类型检查③</span></span><br><span class="line"><span class="comment">// react中会有语法(jsx语法)问题</span></span><br><span class="line"><span class="title function_">render</span>(&lt;<span class="title class_">Result</span>&gt;&#123;</span><br><span class="line">    <span class="attr">data</span>: [</span><br><span class="line">        &#123;<span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">&#x27;A&#x27;</span>, <span class="attr">sex</span>: <span class="string">&#x27;male&#x27;</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">&#x27;b&#x27;</span>&#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 不确定接口有多少属性(索引签名)</span></span><br><span class="line"><span class="comment">// 可索引类型的接口 数字索引签名</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">StringArray</span> &#123;</span><br><span class="line">    [<span class="attr">index</span>: <span class="built_in">number</span>]: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">chars</span>:<span class="title class_">StringArray</span>=[<span class="string">&#x27;A&#x27;</span>,<span class="string">&#x27;B&#x27;</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 字符串索引签名</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Names</span> &#123;</span><br><span class="line">    [<span class="attr">x</span>:<span class="built_in">string</span>]: <span class="built_in">string</span>;</span><br><span class="line">    [<span class="attr">z</span>: <span class="built_in">number</span>]: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 1.当接口定义了一个索引后，例如设置了[x: string] = string,就不能设置y:number了。</span></span><br><span class="line"><span class="comment">因为设置了[x:string]=string 相当于这个接口的字符串索引返回值都为字符串，而y:number违背这一原则。反之益然。</span></span><br><span class="line"><span class="comment">2. 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。</span></span><br><span class="line"><span class="comment">因为数字索引或转化为字符串索引，而转化的这部分索引对应值的类型范围超过了字符串索引类型的范围。报错，超出范围。</span></span><br><span class="line"><span class="comment">**/</span></span><br></pre></td></tr></table></figure>
<h2 id="函数类型接口"><a href="#函数类型接口" class="headerlink" title="函数类型接口"></a>函数类型接口</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义函数类型三种方式？</span></span><br><span class="line"><span class="comment">// 第一种</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">add</span>:<span class="function">(<span class="params">x: <span class="built_in">number</span>, y:<span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span></span><br><span class="line"><span class="comment">// 第二种</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Add</span> &#123;</span><br><span class="line">    (<span class="attr">x</span>:<span class="built_in">number</span>, <span class="attr">y</span>:<span class="built_in">number</span>):<span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 第三种 类型别名</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Add</span> = <span class="function">(<span class="params">x:<span class="built_in">number</span>, y: <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">add</span>:<span class="title class_">Add</span> = <span class="function">(<span class="params">a,b</span>) =&gt;</span> a+b</span><br></pre></td></tr></table></figure>
<p>混合类型 一个接口即可以定义函数也可像对象一样定义属性和方法。<br>用混合类型来定义一个类库：interface定义混合类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Lib</span>() &#123;</span><br><span class="line">    (): <span class="title class_">Void</span>;</span><br><span class="line">    <span class="attr">version</span>: <span class="built_in">string</span>;</span><br><span class="line">    <span class="title function_">doSomething</span>(): <span class="title class_">Void</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getLib</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">lib</span>:<span class="title class_">Lib</span>(<span class="function">()=&gt;</span> &#123;&#125;) <span class="keyword">as</span> <span class="title class_">Lib</span>;</span><br><span class="line">    lib.<span class="property">version</span> = <span class="string">&#x27;1.0&#x27;</span>;</span><br><span class="line">    lib.<span class="property">doSomething</span> = <span class="function">() =&gt;</span> &#123;&#125;</span><br><span class="line">    <span class="keyword">return</span> lib;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="函数相关知识点梳理"><a href="#函数相关知识点梳理" class="headerlink" title="函数相关知识点梳理"></a>函数相关知识点梳理</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数定义</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add1</span>(<span class="params">x:<span class="built_in">number</span>, y:<span class="built_in">number</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x+y</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">add2</span>:<span class="function">(<span class="params">x:<span class="built_in">number</span>, y:<span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> add3 = <span class="function">(<span class="params">x:<span class="built_in">number</span>, y:<span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> add4 &#123;</span><br><span class="line">    (<span class="attr">x</span>:<span class="built_in">number</span>, <span class="attr">y</span>: <span class="built_in">number</span>): <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 函数参数要求     可选参数 ? !</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add5</span>(<span class="params">x: <span class="built_in">number</span>, y?:<span class="built_in">number</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> y? x+y : x;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add6</span>(<span class="params">x:<span class="built_in">number</span>, y=<span class="number">0</span>, z:<span class="built_in">number</span>, q=<span class="number">1</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x+y+z+q</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add7</span>(<span class="params">x:<span class="built_in">number</span>, ...rest:<span class="built_in">number</span>[]</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x+rest.<span class="title function_">reduce</span>((pre,<span class="function"><span class="params">cur</span>=&gt;</span>pre+cur))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>TypeScript中函数重载：<br>在C++或Java静态语言中，两个函数名称相同，但参数类型不同或者参数个数不同，实现了重载。<br>重载的好处：不需要为功能相似的函数起不同的名称。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add8</span>(<span class="params">...rest:<span class="built_in">number</span>[]</span>):<span class="built_in">number</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add8</span>(<span class="params">...rest:<span class="built_in">string</span>[]</span>):<span class="built_in">string</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add8</span>(<span class="params">..rest:<span class="built_in">any</span>[]</span>):<span class="built_in">any</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> first = rest[<span class="number">0</span>]</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> first === <span class="string">&#x27;string&#x27;</span>) &#123;&#125;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> first === <span class="string">&#x27;number&#x27;</span>) &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="类-继承和成员修饰符"><a href="#类-继承和成员修饰符" class="headerlink" title="类 (继承和成员修饰符)"></a>类 (继承和成员修饰符)</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Dog</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">name</span>: sting <span class="comment">//TS在类中使用this,需要先声明类型之后再使用。</span></span><br><span class="line">    <span class="comment">// constructor() &#123;public x:number&#125; &#123;&#125; 跟上边一样</span></span><br><span class="line">    <span class="title function_">run</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Dog</span>.<span class="property">Prototype</span>)</span><br><span class="line"><span class="keyword">let</span> dog = <span class="keyword">new</span> <span class="title class_">Dog</span>(<span class="string">&#x27;wangwang&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">1.name属性在实例上，而不在原型上</span></span><br><span class="line"><span class="comment">2.实例的属性必须有初始值。改为： name:string=&#x27;dog&#x27;</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>类的继承</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Huskey</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Dog</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name:<span class="built_in">string</span>, color:<span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">super</span>(name) <span class="comment">//继承父类一定加supter 等于 Dog.call(this,name)</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">color</span>=color</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">color</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>类的成员修饰符<br>类的所有属性默认为public,对所有开放<br>类的私有成员只能被类本身调用，不能被类的实例与子类调用。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">private</span> <span class="title function_">pri</span>(<span class="params"></span>) &#123;&#125; <span class="title class_">Dog</span>.<span class="title class_">Pri</span>()</span><br><span class="line"><span class="keyword">private</span> <span class="title function_">constructor</span>(<span class="params"></span>) &#123;&#125; <span class="comment">//即不能被实例化也不能被继承</span></span><br><span class="line"><span class="keyword">protected</span> <span class="comment">//受保护成员 只能类或子类访问，不能被类的实例访问</span></span><br><span class="line"><span class="keyword">readonly</span>  <span class="comment">//只读 只读属性不能更改，一定要被初始化</span></span><br><span class="line"><span class="comment">// 构造函数也可以添加修饰符。作用：将参数作为实例的属性，可以省去在类中的定义。</span></span><br><span class="line"><span class="keyword">static</span> <span class="attr">food</span>:sting = <span class="string">&#x27;bones&#x27;</span> <span class="comment">//静态修饰符只能通过类名调用可以被继承</span></span><br></pre></td></tr></table></figure>
<h2 id="抽象类与多态"><a href="#抽象类与多态" class="headerlink" title="抽象类与多态"></a>抽象类与多态</h2><p>抽象类关键字abstract 只能被继承，不能被实例化的类<br>好处：可以抽离出一些事物的共性，有利于代码复用，扩展，实现多态。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">abstract</span> calss <span class="title class_">Animal</span> &#123;</span><br><span class="line">    <span class="title function_">eat</span>(<span class="params"></span>) &#123;&#125; <span class="comment">//方法的复用</span></span><br><span class="line">    <span class="keyword">abstract</span> <span class="title function_">sleep</span>(): <span class="built_in">void</span> <span class="comment">//抽象方法的好处是明确知道子类有其他的实现，不必在父类实现</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="多态"><a href="#多态" class="headerlink" title="多态"></a>多态</h2><p>在父类中定义一个抽象方法，在多个子类中对这个方法有不同的实现。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Dog</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Animal</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">super</span>()</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span></span><br><span class="line">    <span class="title function_">sleep</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;dog sleep&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> dog = <span class="keyword">new</span> <span class="title class_">Dog</span>()</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Cat</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Animal</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Cap sleep&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> cat = <span class="keyword">new</span> <span class="title class_">Cat</span>()</span><br><span class="line"><span class="keyword">let</span> <span class="attr">animals</span>:<span class="title class_">Animalp</span>[] = [dog, cat]</span><br><span class="line">animals.<span class="title function_">forEach</span>(<span class="function"><span class="params">i</span> =&gt;</span> &#123;</span><br><span class="line">    i.<span class="title function_">sleep</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>this类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">WorkFlow</span> &#123;</span><br><span class="line">    <span class="title function_">step1</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">step2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Myflow</span> <span class="keyword">extends</span> <span class="title class_ inherited__">WorkFlow</span> &#123;</span><br><span class="line">    <span class="title function_">next</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Myfow</span>().<span class="title function_">next</span>().<span class="title function_">step1</span>().<span class="title function_">next</span>().<span class="title function_">step2</span>()</span><br></pre></td></tr></table></figure>
<h2 id="类与接口的关系"><a href="#类与接口的关系" class="headerlink" title="类与接口的关系"></a>类与接口的关系</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 类继承接口</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Human</span> &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span>;</span><br><span class="line">    <span class="title function_">eat</span>():<span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Asian</span> <span class="keyword">implements</span> <span class="title class_">Human</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="title function_">eat</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>一个接口可以约束类成员有哪些属性以及他们的类型。<br>1.类实现接口的时候必须实现接口中声明的属性。<br>2.接口只能约束类的共有成员。<br>3.接口不能约束类的构造函数。</p>
<h2 id="接口之间的继承"><a href="#接口之间的继承" class="headerlink" title="接口之间的继承"></a>接口之间的继承</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Man</span> <span class="keyword">extends</span> <span class="title class_">Human</span> &#123;</span><br><span class="line">    <span class="title function_">run</span>():<span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Child</span> &#123;</span><br><span class="line">    <span class="title function_">cry</span>():<span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Boy</span> <span class="keyword">extends</span> <span class="title class_">Man</span>,<span class="title class_">Child</span> &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">boy</span>:<span class="title class_">Boy</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="title function_">run</span>(<span class="params"></span>) &#123;&#125;,</span><br><span class="line">    <span class="title function_">cry</span>(<span class="params"></span>) &#123;&#125;,</span><br><span class="line">    <span class="title function_">eat</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>接口的继承可抽离可重用的接口，可将多个接口合并一个接口。</p>
<h2 id="接口继承类"><a href="#接口继承类" class="headerlink" title="接口继承类"></a>接口继承类</h2><p>接口把类的成员都抽象了出来，有类的成员结构而没有具体的实现。<br>？表示的取值<br>！非空赋值</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Auto</span> &#123;</span><br><span class="line">    state = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">AutoInterface</span> <span class="keyword">extends</span> <span class="title class_">Auto</span> &#123;&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">C</span> <span class="keyword">implements</span> <span class="title class_">AutoInterface</span> &#123;</span><br><span class="line">    state = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Bus</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Auto</span> <span class="keyword">implements</span> <span class="title class_">AutoInterface</span> &#123;&#125;</span><br></pre></td></tr></table></figure>
<p>接口可以限制类型，接口中不能有非抽象的方法，接口中都是抽象的，不能有具体的实现。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Eat</span> &#123;</span><br><span class="line">    <span class="comment">// 原型还是实例？</span></span><br><span class="line">    <span class="attr">eat</span>:<span class="function">() =&gt;</span> <span class="built_in">void</span> <span class="comment">//实例</span></span><br><span class="line">    <span class="title function_">drink</span>():<span class="built_in">void</span> <span class="comment">//原型</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Tom</span> <span class="keyword">implements</span> <span class="title class_">Eat</span> &#123;&#125;</span><br></pre></td></tr></table></figure>
<p>接口来描述构造函数 如何做？需要采用typeof</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Mouse</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"><span class="keyword">public</span> name:<span class="built_in">string</span>, <span class="keyword">public</span> age:<span class="built_in">number</span></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getInstance</span>(<span class="params">clazz: ICazzz</span>) &#123;&#125;</span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Iclazz</span> = <span class="keyword">new</span> (<span class="attr">name</span>:<span class="built_in">string</span>, <span class="attr">age</span>:<span class="built_in">number</span>) =&gt; <span class="built_in">any</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Icazzz</span> &#123; <span class="keyword">new</span> (<span class="attr">name</span>:<span class="built_in">string</span>, <span class="attr">age</span>:<span class="built_in">number</span>):<span class="built_in">any</span> &#125;</span><br></pre></td></tr></table></figure>
<h2 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h2><p>不预先确定的数据类型，具体的类型在使用的时候才能确定。<br>1.泛型定义函数与2.泛型定义类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// function log(value:string):string &#123;</span></span><br><span class="line"><span class="comment">//     return value</span></span><br><span class="line"><span class="comment">// &#125;    便于理解下边的泛型</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//一 接收的参数是确定的。函数重载 联合类型 any类型 泛型 </span></span><br><span class="line"><span class="keyword">function</span> log&lt;T&gt;(<span class="attr">value</span>:T):T &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(value)</span><br><span class="line">    <span class="keyword">return</span> value</span><br><span class="line">&#125;</span><br><span class="line">log&lt;<span class="built_in">string</span>[]&gt;([<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>])</span><br><span class="line"><span class="comment">// log([&#x27;a&#x27;, &#x27;b&#x27;])</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//二：泛型</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Log</span> = &lt;T&gt;<span class="function">(<span class="params">value: T</span>) =&gt;</span> T</span><br><span class="line"><span class="keyword">let</span> <span class="title class_">MyLog</span>:<span class="title class_">Log</span> = log</span><br><span class="line"></span><br><span class="line"><span class="comment">// 三: 泛型约束函数</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Log</span> &#123;</span><br><span class="line">    &lt;T&gt;(<span class="attr">value</span>:T):T</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 泛型约束其他成员 &lt;T=string&gt;默认类型</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Log</span>&lt;T&gt; &#123;</span><br><span class="line">    (<span class="attr">value</span>: T)T</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 使用时必须指定一个类型</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">Mylog</span>:<span class="title class_">Log</span>&lt;<span class="built_in">number</span>&gt; = log</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/04/20/TypeScript/" data-id="cljmgj1eu0009zc9jczm2hw4v" data-title="TypeScript" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/bailment-blog/2023/04/21/TypeScript2/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          TypeScript 2
        
      </div>
    </a>
  
  
    <a href="/bailment-blog/2023/03/30/%E5%89%8D%E7%AB%AF%E9%85%8D%E7%BD%AE-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">前端配置&amp;常见问题</div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/07/">July 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/06/">June 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/04/">April 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/03/">March 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2022/03/">March 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/bailment-blog/2023/07/03/%E5%B7%A5%E4%BD%9C%E6%97%A5%E5%BF%97/">工作日志</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/29/payMent/">payMent</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/20/%E7%BD%91%E7%BA%A2%E9%9D%A2%E8%AF%95%E9%A2%98/">原理题</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/19/%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E6%96%B9%E6%B3%95/">前端大屏自适应方法</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/17/10%E4%B8%AAJavaScript%E5%B8%B8%E8%A7%81%E9%AB%98%E7%BA%A7%E7%9F%A5%E8%AF%86%E7%82%B9/">10个JavaScript常见高级知识点</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2023 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/bailment-blog/" class="mobile-nav-link">Home</a>
  
    <a href="/bailment-blog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/bailment-blog/js/jquery-3.4.1.min.js"></script>



  
<script src="/bailment-blog/fancybox/jquery.fancybox.min.js"></script>




<script src="/bailment-blog/js/script.js"></script>





  </div>
</body>
</html>